package com.wxn.learncompose.pagers

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Info
import androidx.compose.material.icons.filled.MailOutline
import androidx.compose.material3.Button
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.ListItem
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.rememberModalBottomSheetState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.launch

@OptIn(ExperimentalMaterial3Api::class)
@Composable fun ModelBottomSheetLayoutCardPager() {
    val scope = rememberCoroutineScope()
    val bottomSheetState = rememberModalBottomSheetState(false)
    LaunchedEffect(Unit) {
        bottomSheetState.hide()
    }

    Box(modifier = Modifier
        .fillMaxSize()
        .background(Color.White)
    ){
        if (bottomSheetState.isVisible)  {
            ModalBottomSheet(onDismissRequest = {
                scope.launch {
    //                if (bottomSheetState.isVisible) {
                        bottomSheetState.hide()
    //                } else {
    //                    bottomSheetState.show()
    //                }
                }
            },
            sheetState = bottomSheetState) {
                Column(
                    modifier = Modifier
                        .fillMaxWidth()
                        .background(Color.White)
                        .padding(12.dp)
                ) {
                    ListItem(headlineContent = {
                        Text("选择分享：")
                    })
                    ListItem(headlineContent = {
                        Text("github")
                        },
                        leadingContent = {
                            Surface(shape = CircleShape,
                                color = Color(0xFF181717)){
                                Icon(Icons.Default.Info, null,
                                    tint = Color.White,
                                    modifier = Modifier.padding(4.dp))
                            }
                        }, modifier = Modifier.clickable {  })
                    ListItem(headlineContent = {
                        Text("wechat")
                        },
                        leadingContent = {
                            Surface(shape = CircleShape,
                                color = Color(0xFF181717)){
                                Icon(Icons.Default.MailOutline, null,
                                    tint = Color.White,
                                    modifier = Modifier.padding(4.dp))
                            }
                        }, modifier = Modifier.clickable {  })
                }
            }
        }

//        Column(modifier = Modifier.fillMaxSize(),
//            verticalArrangement = Arrangement.Center,
//            horizontalAlignment = Alignment.CenterHorizontally) {
            Button(onClick = {
                scope.launch {
//                    if (bottomSheetState.isVisible) {
//                        bottomSheetState.hide()
//                    } else {
                        bottomSheetState.show()
//                    }
                }
            }){
                Text(text = "Click Show Bottom Layout")
            }
//        }
    }

}